<template>
	<view class="container">
		<!-- 顶部tab -->
		<gb-tab :tabBarArr="tabList" :tabIndex="tabIndex" @tabtap="tabtap" style="position:sticky;"></gb-tab>
		<!-- 加载图标 -->
		<gb-loading :loadGif="loadGif" v-if="loading && tableData.length<1"></gb-loading>
		<!-- 用户列表 -->
		<view v-if="tableData.length>0 && tabIndex ==0">
		    <block v-for="(item,i) in tableData" :key="i">
				<view class="prod-item">
					<view class="order-num">
						<text>用户名称：啊荣</text>
						<view class="order-state">
						  <text>用户状态：</text>
						  <text :class="'order-sts  ' + (item.status==1?'gray':'') + '  ' + (item.status!=1?'red':'')">{{item.status==1?'开启':'禁用'}}</text>
						</view>
					</view>
					<view>
					  <view class="item-cont" @tap="toOrderDetailPage" :data-ordernum="item.orderNumber">
					    <view class="prod-info">
					      <view class="prodname">
					        总金额：1000 总订单数：500 总返利：200
					      </view>
						  <view class="prodname">
						    日金额：50000 日订单数：6000 日反利：100
						  </view>
					    </view>
					  </view>
					</view>
					<view class="prod-foot">
					  <view class="btn">
					    <text v-if="item.status!=1" class="button" @tap="onCancelOrder" :data-ordernum="item.orderNumber" hover-class="none">启用</text>
					    <text v-if="item.status!=1" class="button warn" @tap="normalPay" :data-ordernum="item.orderNumber" hover-class="none">禁用</text>
					  </view>
					</view>
				</view>
			</block>
		</view>
		
		<!-- 收益列表 -->
		<view v-if="tableData.length>0 && tabIndex ==1">
		    <block v-for="(item,i) in tableData" :key="i">
				<view class="prod-item">
					<view class="order-num">
						<text>订单号：121112333</text>
						<view class="order-state">
						  <text>状态：</text>
						  <text :class="'order-sts  ' + (item.status==1?'gray':'') + '  ' + (item.status!=1?'red':'')">{{item.status==1?'成功':'待支付'}}</text>
						</view>
					</view>
					<view>
					  <view class="item-cont" @tap="toOrderDetailPage" :data-ordernum="item.orderNumber">
					    <view class="prod-info">
						<view class="prodname">
						  用户：阿妈
						</view>
					      <view class="prodname">
					        订单金额：1000
					      </view>
						  <view class="prodname">
						    订单收益：50000
						  </view>
					    </view>
					  </view>
					</view>
				</view>
			</block>
		</view>
		
		<!-- 没有数据 -->
		<gb-nothing :nothingImg="nothingImg" v-if="isnothing && tableData.length<1"></gb-nothing>
		<!-- 上拉加载 -->
		<gb-more :loadingGif="loadingGif" :hasMore="hasMore" :loading="loading" v-if="tableData.length>9"></gb-more>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadGif: "../../static/loading.gif",
				nothingImg: '../../static/nothing.png',
				loadingGif: '../../static/loadings.gif',
				isnothing: false,
				tabIndex: 0,
				hasMore: true,
				loading: true,
				tableData: [],
				tabList: [{
						name: '推广'
					},
					{
						name: '收益'
					}
				]

			}
		},
		onLoad() {
			this.loadData()
		},
		onReachBottom() {
			this.hasMore = true
			this.loading = true
			this.loadData(1)
		},
		onPullDownRefresh() {
			this.loading = true
			this.isnothing = false
			this.loadData()
			setTimeout((res) => {
				uni.stopPullDownRefresh()
			}, 500)
		},
		methods: {
			// 模拟加载
			async loadData(i) {
				try {
					if (!i) {
						this.tableData = []
					}
					setTimeout((res) => {
						let arr = []
						let obj = {
							img: '../../static/listimg.jpg'
						}
						for (let i = 0; i < 20; i++) {
							arr.push(obj)
							console.log("111111111111: ", 11111);
						}
						console.log("arr: ", arr);
						this.loading = false
						if (this.tableData.length > 0) {
							this.tableData = this.tableData.concat(arr || [])
						} else {
							this.tableData = arr || []
							if (this.tableData.length == 0) {
								this.isnothing = 1
							}
						}

						console.log("this.tableData.length: ", this.tableData.length);

						console.log("this.tableData: ", this.tableData);
					}, 1000)


				} catch (e) {
					console.log("e: ", e);
				}
			},

			// tabbar点击事件
			tabtap(index) {
				if (this.tabIndex != index) {
					this.loading = true
					this.tableData = []
					this.isnothing = false
					this.tabIndex = index;
					this.loadData()
				}
			}
		},
	}
</script>

<style>
	@import "./qrcode.css";
	
	page {
		background-color: #e8e8e8;
	}

	.index_box {
		margin: 30rpx 30rpx 0 30rpx;
		border-radius: 30rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.index_box_img {
		width: 100%;
		border-radius: 30rpx;
	}
</style>